<template>
  <view class="pa-3">
    <view class="pa-3 bg-cell al-c bdrs-8" hover-class="btn-1" @click="onHead">
      <u-avatar :src="userMeta.avatar_url" size="42"></u-avatar>
      <view class="ml-3 lh-1">
        <view class="fz-18">{{
          userMeta.nickname || userInfo.phone || "登录"
        }}</view>
        <view class="mt-2 fz-12 op-5" v-if="userMeta.nickname">{{
          userInfo.phone || userInfo.email || userInfo.bot_name
        }}</view>
      </view>
    </view>

    <mine-menu />
  </view>
</template>

<script>
import { mapState } from "vuex";
import mineMenu from "./mine-menu.vue";

export default {
  components: {
    mineMenu,
  },
  computed: {
    ...mapState(["userInfo"]),
    userMeta() {
      return this.userInfo.user_metadata || this.userInfo;
    },
    isLogin() {
      return !!this.userInfo.phone;
    },
  },
  data() {
    return {
      getUserTime: Date.now(),
    };
  },
  onPullDownRefresh() {
    this.getUser();
  },
  methods: {
    async onTest() {
      try {
        await this.$store.dispatch("postUserInfo", {
          test: 2,
        });
      } catch (error) {
        console.log(error);
      }
    },
    async getUser() {
      try {
        if (Date.now() - this.getUserTime > 5e3) {
          await this.$store.dispatch("getUserInfo");
          this.getUserTime = Date.now();
        }
      } catch (error) {
        console.log(error);
      }
      uni.stopPullDownRefresh();
    },
    onHead() {
      let path = "mine/login";
      if (this.isLogin || this.userInfo.bot_name) {
        path = "mine/info";
      }
      this.$navTo(path);
    },
  },
};
</script>
